
<style>
    :host {
        text-align: center;
        z-index: 200;
    }
    div.mc-background {
        height: 100vh;
        background-image: var(--mc-ui-background-img);
        background-repeat: repeat;
        background-size: auto;
    }
    div.mc-background[darken] {
        background-image: var(--mc-ui-background-darken-img);
    }
    h1 {
        margin: 0;
        padding: 20px 0 0;
    }
    mc-slider,
    mc-button {
        padding: 1.2vh 0;
        width: 49%;
        box-sizing: border-box;
        max-width: 400px;
        margin-bottom: 10px;
        touch-action: pan-y;
    }
</style>
<div class="mc-background" darken>
    <h1>Options</h1>
    <h2>Terrain type:</h2>
    <mc-button class="world-terrain">flat</mc-button>
    <mc-button class="world-terrain">pre-classic</mc-button>
    <h2>Video Settings</h2>
    <mc-slider id="homepage-blur" label="Homepage Blur: " unit=" px" min="0" step="0.5" max="10" value="3.5"></mc-slider>
    <br />
    <mc-button gotoPage="*pop">Back</mc-button>
</div>
